<<<<<<< HEAD
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title></title>
    <style>
      *{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
    background-color: black;
}
.tab_menu{
    clear:both;
}

.tab_menu li{
    float:left;  
    /*//将导航头左飘*/
    text-align:center;  
    /*//将文字居中*/
    list-style:none;  
    /*//去除标记符号*/
    background:black;
    color: white;
     /*//设置默认背景色*/
    border:1px solid #898989;
     /*//设置边框色*/
    margin-right:4px; 
    /*//每个li之间的距离为4px*/
    cursor:pointer; 
     /*//鼠标浮上之后，会有小手的标示出现*/
    padding:1px 6px; 
    /*//控制li的内部距离*/
    border-bottom:none; 

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{
    /*//为选中的选项加背景与颜色*/
    color:black; 
    background:white;
}
.tab_box{
    clear:both;
     /*//清楚float效果的影响*/
    height:100px;
    
    /*//设置高度为100px*/
    border:1px solid #898989; 
    /*//设置内容体的边框样式*/
    text-align: center;
    color: white;
}
.hide{
    /*//隐藏需要隐藏的内容div*/
    display:none;
}

    </style>
</head>
<body>
    <div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>
             内容一<br>
             内容一<br>
             内容一
         </div>
         <div class="hide">
             内容二<br>
             内容二<br>
             内容二<br>
             内容二<br>
             内容二
         </div>
         <div class="hide">
             内容三<br>
             内容三<br>
             内容三<br>
             内容三<br>
         </div>
    </div>
</div>

</body>
</html>
<script>
$(function(){
    //1.点击时改变css属性，移除之前的selected选项，添加新的selected选项
    //2.隐藏之前的div层，显示对应得div层
    //为导航中的li注册点击事件
    var $div_li = $(".tab_menu ul li");
    $div_li.mouseover(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //var index = $div_li.index(this);
        //$("div.tab_box > div").eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text=='选项一')
        {
            $('.tab_box div:contains("内容一")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='选项二')
        {
            $('.tab_box div:contains("内容二")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='选项三')
        {
            $('.tab_box div:contains("内容三")').removeClass('hide').siblings().addClass('hide');
        }
    })
    
    // $div_li.click.hover(function(){
    //         $(this).addClass("hover");
    //     },function(){
    //         $(this).removeClass("hover");
    //     });
});
=======
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title></title>
    <style>
      *{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
    background-color: black;
}
.tab_menu{
    clear:both;
}

.tab_menu li{
    float:left;  
    /*//将导航头左飘*/
    text-align:center;  
    /*//将文字居中*/
    list-style:none;  
    /*//去除标记符号*/
    background:black;
    color: white;
     /*//设置默认背景色*/
    border:1px solid #898989;
     /*//设置边框色*/
    margin-right:4px; 
    /*//每个li之间的距离为4px*/
    cursor:pointer; 
     /*//鼠标浮上之后，会有小手的标示出现*/
    padding:1px 6px; 
    /*//控制li的内部距离*/
    border-bottom:none; 

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{
    /*//为选中的选项加背景与颜色*/
    color:black; 
    background:white;
}
.tab_box{
    clear:both;
     /*//清楚float效果的影响*/
    height:100px;
    
    /*//设置高度为100px*/
    border:1px solid #898989; 
    /*//设置内容体的边框样式*/
    text-align: center;
    color: white;
}
.hide{
    /*//隐藏需要隐藏的内容div*/
    display:none;
}

    </style>
</head>
<body>
    <div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>
             内容一<br>
             内容一<br>
             内容一
         </div>
         <div class="hide">
             内容二<br>
             内容二<br>
             内容二<br>
             内容二<br>
             内容二
         </div>
         <div class="hide">
             内容三<br>
             内容三<br>
             内容三<br>
             内容三<br>
         </div>
    </div>
</div>

</body>
</html>
<script>
$(function(){
    //1.点击时改变css属性，移除之前的selected选项，添加新的selected选项
    //2.隐藏之前的div层，显示对应得div层
    //为导航中的li注册点击事件
    var $div_li = $(".tab_menu ul li");
    $div_li.mouseover(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //var index = $div_li.index(this);
        //$("div.tab_box > div").eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text=='选项一')
        {
            $('.tab_box div:contains("内容一")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='选项二')
        {
            $('.tab_box div:contains("内容二")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='选项三')
        {
            $('.tab_box div:contains("内容三")').removeClass('hide').siblings().addClass('hide');
        }
    })
    
    // $div_li.click.hover(function(){
    //         $(this).addClass("hover");
    //     },function(){
    //         $(this).removeClass("hover");
    //     });
});
>>>>>>> 07c3cd41dd3d9d593ca83cc155ab35f796873b0b
</script>